import React, { Component } from 'react';
import { Text, View, Swiper, SwiperItem, Image } from '@tarojs/components';
import Taro from "@tarojs/taro";
import { UserId } from "../../util";
import { AtGrid, AtIcon } from "taro-ui"
import { AtIconBaseProps } from 'taro-ui/types/base';
import "./index.scss";

let cloumnData: { value: string, iconInfo: AtIconBaseProps }[] = [
  {
    value: '普通寄件',
    iconInfo: {
      value: 'upload'
    }
  },
  {
    value: '特快寄件',
    iconInfo: {
      value: 'lightning-bolt'
    }
  },
  {
    value: '信件寄件',
    iconInfo: {
      value: 'mail'
    }
  },
  {
    value: '贵重物品寄件',
    iconInfo: {
      value: 'sketch'
    }
  },
  {
    value: '同城速递',
    iconInfo: {
      value: 'home'
    }
  }
]
class index extends Component {
  constructor(props) {
    super(props);
    let userID: string = UserId.get();
    if (userID === '') {
      Taro.reLaunch({
        url: '/pages/login/index'
      })
    }
  }
  handleMail = (obj, index) => {
    Taro.navigateTo({
      url: `/pages/mail/index?obj=${JSON.stringify(obj)}&index=${index}`
    })
  }
  render() {
    return (
      <View>
        <Swiper
          circular
          autoplay
          indicatorDots
          className='radio'
        >
          <SwiperItem>
            <Image src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2161298473,1219927087&fm=26&gp=0.jpg'></Image>
          </SwiperItem>
          <SwiperItem>
            <Image src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2161298473,1219927087&fm=26&gp=0.jpg'></Image>
          </SwiperItem>
          <SwiperItem>
            <Image src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2161298473,1219927087&fm=26&gp=0.jpg'></Image>
          </SwiperItem>
        </Swiper>
        {/* 用户选择 */}
        <AtGrid onClick={this.handleMail} className='white mlr radio mt' mode="rect" columnNum={2} data={cloumnData}>
        </AtGrid>
        <View className='white mt box-wrapper mlr at-row at-row__align--center'>
          <View className='box mlr'>
            <AtIcon value='message' size="28" className='mlr'></AtIcon>
            <Text>消息反馈</Text>
          </View>
          <View className='info'>
            <Text className='at-article__info'>用心倾听每一次反馈</Text>
          </View>
        </View>
      </View>
    );
  }
}

export default index;